import React, { useState, useEffect, useCallback } from 'react';
import {
  Modal,
  Form,
  Input,
  DatePicker,
  TreeSelect,
  Select,
  Row,
  Col,
  Button,
  Icon,
  Radio,
} from 'antd';
import { connect } from 'dva';
import styles from './index.less';

function MyNormForm({ placeSelectData, form, modalType, formItems, editSava, onCancelHandle }) {
  console.log(placeSelectData, form, modalType, formItems);

  const { getFieldDecorator, validateFields, resetFields, getFieldValue, setFieldsValue } = form;

  const [GexceedNumers, setGexceedNumers] = useState(['', '']);
  const [JexceedNumers, setJexceedNumers] = useState(['', '']);
  const [targetClassType, settargetClassType] = useState('unDiff');
  const [fromParams, setfromParams] = useState({});
  const [initClassType, setinitClassType] = useState(''); //初始化classtype

  const classTypeMap = {
    A: '合并舱位',
    J: '经济舱',
    G: '公务舱',
  };
  const saveHandle = () => {
    console.log(1111)
    validateFields((err, values) => {
      console.log(err, values)
      if (!err) {
        let lastParmas = [];
        let updateIdObj = {},
          updateClassType = {};
        if (modalType === 'update') {
          updateIdObj = fromParams.idObj;
          if (initClassType !== targetClassType) {
            updateClassType = { classChange: 'Y' };
          } else {
            updateClassType = { classChange: 'N' };
          }
        }
        let defaultParams = {
          dstPlace: values.dstPlace,
          orgPlace: values.orgPlace,
          ...updateIdObj,
        };
        let GData = {
          classType: 'G',
          overNumberFirstPrice: values.GaoOverNumber1,
          overNumberSecondPrice: values.GaoOverNumber2,
          overNumberThirdPrice: values.GaoOverNumber3,

          overSizeMaxValue: values.GoverSizeMaxValue,
          overSizeMinValue: values.GoverSizeMinValue,
          overSizePrice: values.GoverSizePrice,

          overWeightFirstMaxValue: values.GoverWeightMaxValue1,
          overWeightFirstMinValue: values.GoverWeightMinValue1,
          overWeightFirstPrice: values.GoverWeightPrice1,
          overWeightSecondMaxValue: values.GoverWeightMaxValue2,
          overWeightSecondMinValue: values.GoverWeightMinValue2,
          overWeightSecondPrice: values.GoverWeightPrice2,
        };

        if (targetClassType === 'unDiff') {
          //合并舱位
          lastParmas[0] = { ...defaultParams, ...GData, classType: 'A', ...updateClassType };
        } else {
          let JData = {
            classType: 'J',
            overNumberFirstPrice: values.JaoOverNumber1,
            overNumberSecondPrice: values.JaoOverNumber2,
            overNumberThirdPrice: values.JaoOverNumber3,

            overSizeMaxValue: values.JoverSizeMaxValue,
            overSizeMinValue: values.JoverSizeMinValue,
            overSizePrice: values.JoverSizePrice,

            overWeightFirstMaxValue: values.JoverWeightMaxValue1,
            overWeightFirstMinValue: values.JoverWeightMinValue1,
            overWeightFirstPrice: values.JoverWeightPrice1,
            overWeightSecondMaxValue: values.JoverWeightMaxValue2,
            overWeightSecondMinValue: values.JoverWeightMinValue2,
            overWeightSecondPrice: values.JoverWeightPrice2,
          };
          lastParmas[0] = { ...defaultParams, ...GData, ...updateClassType };
          lastParmas[1] = { ...defaultParams, ...JData, ...updateClassType };
        }
        console.log(fromParams);
        editSava(modalType, lastParmas);
      }
    });
  };

  const onCancel = () => {
    onCancelHandle();
    setGexceedNumers(['', ''])
    setJexceedNumers(['', ''])
  };
  const changeClassType = val => {
    settargetClassType(val);
  };
  const addNorm = type => {
    if (type === 'G') {
      if (GexceedNumers.length < 3) {
        setGexceedNumers([...GexceedNumers, '']);
      }
    } else {
      if (JexceedNumers.length < 3) {
        setJexceedNumers([...JexceedNumers, '']);
      }
    }
  };
  const reduceNorm = type => {
    if (type === 'G') {
      if (GexceedNumers.length > 2) {
        let copyexceedNumers = JSON.parse(JSON.stringify(GexceedNumers));
        copyexceedNumers.pop();
        setGexceedNumers(copyexceedNumers);
      }
    } else {
      if (JexceedNumers.length > 2) {
        let copyexceedNumers = JSON.parse(JSON.stringify(JexceedNumers));
        copyexceedNumers.pop();
        setJexceedNumers(copyexceedNumers);
      }
    }
  };
  const formatFormItems = () => {
    console.log('init', formItems);
    let lastParams = {},
      ids = formItems.aoOverWeightClassList.map(item => item.id),
      tempObj = formItems.aoOverWeightClassList[0],
      idObj = {
        id: formItems.id,
        ids,
      },
      defaultParmas = {
        dstPlace: formItems.dstPlace,
        orgPlace: formItems.orgPlace,
        GaoOverNumber1: tempObj.aoOverNumber.overNumberFirstPrice,
        GaoOverNumber2: tempObj.aoOverNumber.overNumberSecondPrice,
        GaoOverNumber3: tempObj.aoOverNumber.overNumberThirdPrice,
        GoverSizeMinValue: tempObj.aoOverSize.overSizeMinValue,
        GoverSizeMaxValue: tempObj.aoOverSize.overSizeMaxValue,
        GoverSizePrice: tempObj.aoOverSize.overSizePrice,
        GoverWeightMinValue1: tempObj.aoOverWeightList[0].overWeightMinValue,
        GoverWeightMaxValue1: tempObj.aoOverWeightList[0].overWeightMaxValue,
        GoverWeightPrice1: tempObj.aoOverWeightList[0].overWeightPrice,
        GoverWeightMinValue2: tempObj.aoOverWeightList[1].overWeightMinValue,
        GoverWeightMaxValue2: tempObj.aoOverWeightList[1].overWeightMaxValue,
        GoverWeightPrice2: tempObj.aoOverWeightList[1].overWeightPrice,
      };
    if (formItems.aoOverWeightClassList.length === 1) {
      settargetClassType('unDiff');
      setinitClassType('unDiff');
      lastParams = { idObj, ...defaultParmas };
    } else {
      settargetClassType('diff');
      setinitClassType('diff');
      let tempObj2 = formItems.aoOverWeightClassList[1];
      let JObj = {
        ...defaultParmas,
        JaoOverNumber1: tempObj2.aoOverNumber.overNumberFirstPrice,
        JaoOverNumber2: tempObj2.aoOverNumber.overNumberSecondPrice,
        JaoOverNumber3: tempObj2.aoOverNumber.overNumberThirdPrice,
        JoverSizeMinValue: tempObj2.aoOverSize.overSizeMinValue,
        JoverSizeMaxValue: tempObj2.aoOverSize.overSizeMaxValue,
        JoverSizePrice: tempObj2.aoOverSize.overSizePrice,
        JoverWeightMinValue1: tempObj2.aoOverWeightList[0].overWeightMinValue,
        JoverWeightMaxValue1: tempObj2.aoOverWeightList[0].overWeightMaxValue,
        JoverWeightPrice1: tempObj2.aoOverWeightList[0].overWeightPrice,
        JoverWeightMinValue2: tempObj2.aoOverWeightList[1].overWeightMinValue,
        JoverWeightMaxValue2: tempObj2.aoOverWeightList[1].overWeightMaxValue,
        JoverWeightPrice2: tempObj2.aoOverWeightList[1].overWeightPrice,
      };
      lastParams = { idObj, ...defaultParmas, ...JObj };
    }
    console.log(lastParams, idObj);
    setfromParams(lastParams);
  };
  const integerValidator = (rule, value, callback) => {
    let reg = /(^[1-9]\d*$)/;
    if (value) {
      let val = value * 1;
      if (value < 0 || !reg.test(val)) {
        callback('请输入正整数');
        return
      }
      callback();
    } else {
      callback('请输入正整数');
    }
  }
  useEffect(() => {
    console.log(modalType);
    if (modalType === 'update' || modalType === 'copyAdd') {
      formatFormItems();
    } else {
      setfromParams({});
      form.resetFields();
    }
  }, [modalType, formItems]);
  return (
    <div>
      <div className={styles.formBody}>
        <div className={styles.formHead}>
          <div className={styles.flexRow}>
            <Form.Item label="始发地">
              {getFieldDecorator('orgPlace', {
                initialValue: fromParams.orgPlace || '',
                rules: [
                  {
                    required: true,
                    whitespace: true,
                    message: '请选择始发地',
                  },
                ],
              })(
                <Select showSearch className={styles.formItem} placeholder="请选择始发地">
                  {placeSelectData.map(item => (
                    <Select.Option value={item.value}>{item.label}</Select.Option>
                  ))}
                </Select>,
              )}
            </Form.Item>
            <Form.Item label="到达地">
              {getFieldDecorator('dstPlace', {
                initialValue: fromParams.dstPlace || '',
                rules: [
                  {
                    required: true,
                    whitespace: true,
                    message: '请选择到达地',
                  },
                ],
              })(
                <Select showSearch className={styles.formItem} placeholder="请选择到达地">
                  {placeSelectData.map(item => (
                    <Select.Option value={item.value}>{item.label}</Select.Option>
                  ))}
                </Select>,
              )}
            </Form.Item>
          </div>
          <div>
            <Form.Item label="舱等类型">
              {getFieldDecorator('classType', {
                initialValue: targetClassType,
                rules: [
                  {
                    required: true,
                    whitespace: true,
                    message: '舱等类型',
                  },
                ],
              })(
                <Select className={styles.formItem} onChange={changeClassType}>
                  <Select.Option value="diff">区分舱等</Select.Option>
                  <Select.Option value="unDiff">不区分舱等</Select.Option>
                </Select>,
              )}
            </Form.Item>
          </div>
        </div>
        <div className={styles.formContent}>
          <>
            {targetClassType === 'diff' && <div className={styles.formContentTitle}>公务舱</div>}
            <div
              className={`${styles.flexRow} ${styles.formTitle}`}
              style={{ alignItems: 'center' }}
            >
              <div style={{ marginRight: '10px' }}>超件</div>
              <Button
                icon="plus"
                size="small"
                onClick={() => {
                  addNorm('G');
                }}
              ></Button>
              <Button
                icon="minus"
                size="small"
                onClick={() => {
                  reduceNorm('G');
                }}
              ></Button>
            </div>
            <div className={`${styles.flexRow} ${styles.sonRow}`}>
              {GexceedNumers.map((item, index) => (
                <div className={styles.flexRow} style={{ marginRight: '20px' }}>
                  <Form.Item label={`第${index + 1}件`} key={index}>
                    {getFieldDecorator(`GaoOverNumber${index + 1}`, {
                      initialValue: fromParams[`GaoOverNumber${index + 1}`] || '',
                      rules: [
                        {
                          required: true,
                          whitespace: true,
                          message: '请输入价格',
                        },
                        {
                          max: 4,
                          message: '最多输入4位',
                        },
                        {
                          validator: integerValidator,
                        },
                      ],
                    })(<Input maxLength={4} type="number" className={styles.formItem} />)}
                  </Form.Item>
                  <span>CNY/件</span>
                </div>
              ))}
            </div>
            <div className={styles.formTitle}>超尺寸</div>
            <div className={styles.sonRow}>
              <div className={styles.flexRow}>
                <Form.Item>
                  {getFieldDecorator(`GoverSizeMinValue`, {
                    initialValue: fromParams.GoverSizeMinValue || '',
                    rules: [
                      {
                        required: true,
                        whitespace: true,
                        message: '请输入厘米数',
                      },
                      {
                        max: 3,
                        message: '最多输入3位',
                      },
                    ],
                  })(<Input type="number" className={styles.formItem} />)}
                </Form.Item>
                <span>-</span>
                <Form.Item>
                  {getFieldDecorator(`GoverSizeMaxValue`, {
                    initialValue: fromParams.GoverSizeMaxValue || '',
                    rules: [
                      {
                        required: true,
                        whitespace: true,
                        message: '请输入厘米数',
                      },
                      {
                        max: 3,
                        message: '最多输入3位',
                      },
                    ],
                  })(<Input type="number" className={styles.formItem} />)}
                </Form.Item>
                <span>CM</span>
                <Form.Item>
                  {getFieldDecorator(`GoverSizePrice`, {
                    initialValue: fromParams.GoverSizePrice || '',
                    rules: [
                      {
                        required: true,
                        whitespace: true,
                        message: '请输入价格',
                      },
                      {
                        max: 4,
                        message: '最多输入4位',
                      },
                      {
                        validator: integerValidator,
                      },
                    ],
                  })(<Input type="number" className={styles.formItem} />)}
                </Form.Item>
                <span>CNY/件</span>
              </div>
            </div>
            <div className={styles.formTitle}>超重</div>
            <div className={styles.sonRow}>
              <div className={styles.flexRow}>
                <div className={styles.flexRow}>
                  <Form.Item>
                    {getFieldDecorator(`GoverWeightMinValue1`, {
                      initialValue: fromParams.GoverWeightMinValue1 || '',
                      rules: [
                        {
                          required: true,
                          whitespace: true,
                          message: '请输入kg数',
                        },
                        {
                          max: 3,
                          message: '最多输入3位',
                        },
                      ],
                    })(<Input type="number" className={styles.formItem} />)}
                  </Form.Item>
                  <span>-</span>
                  <Form.Item>
                    {getFieldDecorator(`GoverWeightMaxValue1`, {
                      initialValue: fromParams.GoverWeightMaxValue1 || '',
                      rules: [
                        {
                          required: true,
                          whitespace: true,
                          message: '请输入kg数',
                        },
                        {
                          max: 3,
                          message: '最多输入3位',
                        },
                      ],
                    })(<Input type="number" className={styles.formItem} />)}
                  </Form.Item>
                  <span>kg</span>
                  <Form.Item>
                    {getFieldDecorator(`GoverWeightPrice1`, {
                      initialValue: fromParams.GoverWeightPrice1 || '',
                      rules: [
                        {
                          required: true,
                          whitespace: true,
                          message: '请输入价格',
                        },
                        {
                          max: 4,
                          message: '最多输入4位',
                        },
                        {
                          validator: integerValidator,
                        },
                      ],
                    })(<Input type="number" className={styles.formItem} />)}
                  </Form.Item>
                  <span>CNY/件</span>
                </div>
                <div className={styles.flexRow} style={{ marginLeft: '20px' }}>
                  <Form.Item>
                    {getFieldDecorator(`GoverWeightMinValue2`, {
                      initialValue: fromParams.GoverWeightMinValue2 || '',
                      rules: [
                        {
                          required: true,
                          whitespace: true,
                          message: '请输入kg数',
                        },
                        {
                          max: 3,
                          message: '最多输入3位',
                        },
                      ],
                    })(<Input type="number" className={styles.formItem} maxLength={4} />)}
                  </Form.Item>
                  <div>-</div>
                  <Form.Item>
                    {getFieldDecorator(`GoverWeightMaxValue2`, {
                      initialValue: fromParams.GoverWeightMaxValue2 || '',
                      rules: [
                        {
                          required: true,
                          whitespace: true,
                          message: '请输入kg数',
                        },
                        {
                          max: 3,
                          message: '最多输入3位',
                        },
                      ],
                    })(<Input type="number" className={styles.formItem} />)}
                  </Form.Item>
                  <span>kg</span>
                  <Form.Item>
                    {getFieldDecorator(`GoverWeightPrice2`, {
                      initialValue: fromParams.GoverWeightPrice2 || '',
                      rules: [
                        {
                          required: true,
                          whitespace: true,
                          message: '请输入价格',
                        },
                        {
                          max: 4,
                          message: '最多输入4位',
                        },
                        {
                          validator: integerValidator,
                        },
                      ],
                    })(<Input type="number" className={styles.formItem} />)}
                  </Form.Item>
                  <span>CNY/件</span>
                </div>
              </div>
            </div>
          </>
          {targetClassType === 'diff' && (
            <>
              <div className={styles.formContentTitle}>经济舱</div>
              <div
                className={`${styles.flexRow} ${styles.formTitle}`}
                style={{ alignItems: 'center' }}
              >
                <div style={{ marginRight: '10px' }}>超件</div>
                <Button
                  icon="plus"
                  size="small"
                  onClick={() => {
                    addNorm('J');
                  }}
                ></Button>
                <Button
                  icon="minus"
                  size="small"
                  onClick={() => {
                    reduceNorm('J');
                  }}
                ></Button>
              </div>
              <div className={`${styles.flexRow} ${styles.sonRow}`}>
                {JexceedNumers.map((item, index) => (
                  <div className={styles.flexRow} style={{ marginRight: '20px' }}>
                    <Form.Item label={`第${index + 1}件`} key={index}>
                      {getFieldDecorator(`JaoOverNumber${index + 1}`, {
                        initialValue: fromParams[`JaoOverNumber${index + 1}`] || '',
                        rules: [
                          {
                            required: true,
                            whitespace: true,
                            message: '请输入价格',
                          },
                          {
                            max: 4,
                            message: '最多输入4位',
                          },
                          {
                            validator: integerValidator,
                          },
                        ],
                      })(<Input type="number" className={styles.formItem} />)}
                    </Form.Item>
                    <span>CNY/件</span>
                  </div>
                ))}
              </div>
              <div className={styles.formTitle}>超尺寸</div>
              <div className={styles.sonRow}>
                <div className={styles.flexRow}>
                  <Form.Item>
                    {getFieldDecorator(`JoverSizeMinValue`, {
                      initialValue: fromParams.JoverSizeMinValue || '',
                      rules: [
                        {
                          required: true,
                          whitespace: true,
                          message: '请输入厘米数',
                        },
                        {
                          max: 3,
                          message: '最多输入3位',
                        },
                      ],
                    })(<Input type="number" className={styles.formItem} />)}
                  </Form.Item>
                  <span>-</span>
                  <Form.Item>
                    {getFieldDecorator(`JoverSizeMaxValue`, {
                      initialValue: fromParams.JoverSizeMaxValue || '',
                      rules: [
                        {
                          required: true,
                          whitespace: true,
                          message: '请输入厘米数',
                        },
                        {
                          max: 3,
                          message: '最多输入3位',
                        },
                      ],
                    })(<Input className={styles.formItem} />)}
                  </Form.Item>
                  <span>CM</span>
                  <Form.Item>
                    {getFieldDecorator(`JoverSizePrice`, {
                      initialValue: fromParams.JoverSizePrice || '',
                      rules: [
                        {
                          required: true,
                          whitespace: true,
                          message: '请输入价格',
                        },
                        {
                          max: 4,
                          message: '最多输入4位',
                        },
                        {
                          validator: integerValidator,
                        },
                      ],
                    })(<Input type="number" className={styles.formItem} />)}
                  </Form.Item>
                  <span>CNY/件</span>
                </div>
              </div>
              <div className={styles.formTitle}>超重</div>
              <div className={styles.sonRow}>
                <div className={styles.flexRow}>
                  <div className={styles.flexRow}>
                    <Form.Item>
                      {getFieldDecorator(`JoverWeightMinValue1`, {
                        initialValue: fromParams.JoverWeightMinValue1 || '',
                        rules: [
                          {
                            required: true,
                            whitespace: true,
                            message: '请输入kg数',
                          },
                          {
                            max: 3,
                            message: '最多输入3位',
                          },
                        ],
                      })(<Input type="number" className={styles.formItem} />)}
                    </Form.Item>
                    <span>-</span>
                    <Form.Item>
                      {getFieldDecorator(`JoverWeightMaxValue1`, {
                        initialValue: fromParams.JoverWeightMaxValue1 || '',
                        rules: [
                          {
                            required: true,
                            whitespace: true,
                            message: '请输入kg数',
                          },
                          {
                            max: 3,
                            message: '最多输入3位',
                          },
                        ],
                      })(<Input type="number" className={styles.formItem} />)}
                    </Form.Item>
                    <span>kg</span>
                    <Form.Item>
                      {getFieldDecorator(`JoverWeightPrice1`, {
                        initialValue: fromParams.JoverWeightPrice1 || '',
                        rules: [
                          {
                            required: true,
                            whitespace: true,
                            message: '请输入价格',
                          },
                          {
                            max: 4,
                            message: '最多输入4位',
                          },
                          {
                            validator: integerValidator,
                          },
                        ],
                      })(<Input type="number" className={styles.formItem} />)}
                    </Form.Item>
                    <span>CNY/件</span>
                  </div>
                  <div className={styles.flexRow} style={{ marginLeft: '20px' }}>
                    <Form.Item>
                      {getFieldDecorator(`JoverWeightMinValue2`, {
                        initialValue: fromParams.JoverWeightMinValue2 || '',
                        rules: [
                          {
                            required: true,
                            whitespace: true,
                            message: '请输入kg数',
                          },
                          {
                            max: 3,
                            message: '最多输入3位',
                          },
                        ],
                      })(<Input type="number" className={styles.formItem} />)}
                    </Form.Item>
                    <div>-</div>
                    <Form.Item>
                      {getFieldDecorator(`JoverWeightMaxValue2`, {
                        initialValue: fromParams.JoverWeightMaxValue2 || '',
                        rules: [
                          {
                            required: true,
                            whitespace: true,
                            message: '请输入kg数',
                          },
                          {
                            max: 3,
                            message: '最多输入3位',
                          },
                        ],
                      })(<Input type="number" className={styles.formItem} />)}
                    </Form.Item>
                    <span>kg</span>
                    <Form.Item>
                      {getFieldDecorator(`JoverWeightPrice2`, {
                        initialValue: fromParams.JoverWeightPrice2 || '',
                        rules: [
                          {
                            required: true,
                            whitespace: true,
                            message: '请输入价格',
                          },
                          {
                            max: 4,
                            message: '最多输入4位',
                          },
                          {
                            validator: integerValidator,
                          },
                        ],
                      })(<Input type="number" className={styles.formItem} />)}
                    </Form.Item>
                    <span>CNY/件</span>
                  </div>
                </div>
              </div>
            </>
          )}
        </div>
      </div>
      <div className={styles.modalFooter}>
        <Button type="primary" onClick={saveHandle}>
          确定
        </Button>
        <Button type="primary" onClick={onCancel}>
          取消
        </Button>
      </div>
    </div>
  );
}
export default connect(({ heavyLuggage }) => ({ placeSelectData: heavyLuggage.placeSelectData }))(
  Form.create()(MyNormForm),
);

// Form.create()(MyNormForm);
